<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 600px;
        height: 600px;
        border: 1px solid;
        margin: 0 auto;
        position: relative;
      }
    </style>
  </head>

  <body>
    <div class="container"></div>
    <script>
      var foodInstance;
      // 抽象方块类，方块的构造函数。

      function Rect(x, y, color, container) {
        this.ele = null; // 方块的元素；
        this.x = x; // 方块x轴所在的位置
        this.y = y;
        this.color = color; // 方块的颜色 ；
        this.container = container;
        this.createRect();
      }
      Rect.prototype.createRect = function () {
        // 根据 方块的属性 生成对应的dom结构；
        this.ele = document.createElement("div"); // 创建方块元素
        // 设置方块元素的属性
        this.ele.style.left = this.x + "px";
        this.ele.style.top = this.y + "px";
        this.ele.style.position = "absolute"; // 设置方块的绝对定位属性 ；
        this.ele.style.background = this.color;
        this.ele.style.border = "1px solid";
        this.ele.style.width = "50px";
        this.ele.style.height = "50px";
        // 把方块元素添加到容器里去
        this.container.appendChild(this.ele);
      };

      // 定义一个 蛇类 ，蛇是由方块构成的；
      function Snake(container) {
        // 由多个方块构成 ，把方块对象存起来；
        this.snakeArr = []; // 存放蛇身体方块的数组；
        this.container = container;
        // 蛇设置一个方向属性
        this.dir = "right";
        this.createBody();
      }
      Snake.prototype.createBody = function () {
        // 创建蛇的身体 ； 又5个方块构成；
        for (var i = 0; i < 5; i++) {
          if (i == 4) {
            // 是蛇头的方块
            var rect = new Rect(i * 50, 0, "red", this.container);
          } else {
            // 是蛇身体的方块
            var rect = new Rect(i * 50, 0, "blue", this.container);
          }
          this.snakeArr.push(rect); // 把实例化的方块对象 放在 snakeArr里存放起来
        }
      };
      Snake.prototype.move = function () {
        // 蛇的移动
        // 1.先把蛇头移动一个位置 。
        // 2.然后 删除蛇身体的最后一个元素 。
        // 3.之后再以前蛇头的地方添加一个方块。
        // 获取蛇头: snakeArr的最后一个
        console.log(this.snakeArr);
        var head = this.snakeArr[this.snakeArr.length - 1];
        // 先获取蛇头当前的位置
        var numx = parseInt(head.ele.style.left); // 当前蛇头的left的位置
        var numy = parseInt(head.ele.style.top); // 当前蛇头的top的位置；
        // console.log("left",numx);
        // console.log("top",numy);

        // 在之前头部的位置 添加一个方块对象；
        // console.log(this.snakeArr.length-2);
        this.snakeArr.splice(
          this.snakeArr.length - 1,
          0,
          new Rect(numx, numy, "blue", this.container)
        );

        switch (this.dir) {
          case "right":
            // 蛇头移动一个位置
            head.ele.style.left = numx + 50 + "px";
            break;
          case "left":
            head.ele.style.left = numx - 50 + "px";
            break;
          case "up":
            head.ele.style.top = numy - 50 + "px";
            break;
          case "down":
            head.ele.style.top = numy + 50 + "px";
            break;
          default:
            console.log("方向错误");
            break;
        }

        // 检测 蛇头和  食物是否碰了；
        var headx = head.ele.style.left;
        var heady = head.ele.style.top;
        if (
          headx == foodInstance.foodRect.ele.style.left &&
          heady == foodInstance.foodRect.ele.style.top
        ) {
          console.log("吃了");
          foodInstance.foodRect.ele.remove();
          foodInstance = new Food(this.container);
        } else {
          // 删除蛇身体的最后一个元素
          // 删除 数组的第一个元素；
          var res = this.snakeArr.shift(); // 把数组的第一个元素删除；
          // 删除第一个 dom里的元素；
          // console.log(res);
          res.ele.remove();
        }
      };

      // 食物类  : 生成一个 食物的rect 就可以了； 随机生成；
      function Food(container) {
        var x = this.randomNum(0, 11) * 50;
        var y = this.randomNum(0, 11) * 50;
        this.foodRect = new Rect(x, y, "green", container);
      }

      Food.prototype.randomNum = function (min, max) {
        return parseInt(Math.random() * (max + 1 - min)) + min;
      };

      foodInstance = new Food(document.querySelector(".container"));

      var snake = new Snake(document.querySelector(".container"));
      setInterval(function () {
        snake.move();
      }, 100);

      // 监听键盘事件
      document.onkeydown = function (e) {
        var key = e.key;
        console.log(key);
        switch (key) {
          case "ArrowRight":
            if (snake.dir !== "left") {
              snake.dir = "right";
            }
            break;
          case "ArrowLeft":
            if (snake.dir !== "right") {
              snake.dir = "left";
            }
            break;
          case "ArrowUp":
            if (snake.dir !== "down") {
              snake.dir = "up";
            }
            break;
          case "ArrowDown":
            if (snake.dir !== "up") {
              snake.dir = "down";
            }
            break;
          default:
            console.log("方向键错误");
            break;
        }
      };

      /* 
            1.判断蛇是否死亡 ： isDie  死了  ，定制定时器；
                碰壁死亡  自己吃自己 
            2.关卡 ：  改变速度 
            3.记录积分 
            4. 生命值 
        */
    </script>
  </body>
</html>
